<template>
  <div class="indexwrap">
    <user-header></user-header>
    <left-menu></left-menu>
    <div class="conentwrap">
      <div class="conentCwrap" ref="userContainer">
        <div class="conentBox" ref="userContContainer">
          <router-view/>
          <user-footer :fPosition="fPosition"></user-footer>
        </div>
      </div>
    </div>
    <small-customer-server></small-customer-server>
  </div>
</template>

<script>
import UserHeader from 'common/UserHeader'
import LeftMenu from 'common/LeftMenu'
import UserFooter from 'common/UserFooter'
import SmallCustomerServer from 'common/SmallCustomerServer'
export default {
  name: 'BaseFramework',
  components: {
    UserFooter,
    LeftMenu,
    UserHeader,
    SmallCustomerServer
  },
  data () {
    return {
      oHeight: '',
      fPosition: false
    }
  },
  mounted () {
    this.oHeight = this.$refs.userContainer.offsetHeight - this.$refs.userContContainer.offsetHeight
    if (this.oHeight > 50) {
      this.fPosition = true
    } else {
      this.fPosition = false
    }
  },
  updated () {
    this.oHeight = this.$refs.userContainer.offsetHeight - this.$refs.userContContainer.offsetHeight
    if (this.oHeight > 50) {
      this.fPosition = true
    } else {
      this.fPosition = false
    }
  },
  watch: {
    oHeight: function () {
      let _this = this
      window.onresize = function () {
        _this.oHeight = _this.$refs.userContainer.offsetHeight - _this.$refs.userContContainer.offsetHeight
      }
      if (this.oHeight > 50) {
        this.fPosition = true
      } else {
        this.fPosition = false
      }
    }
  },
  methods: {

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.indexwrap
  width 100%
  height 100%
  .conentwrap
    padding 70px 0 0 180px
    box-sizing border-box
    height 100%
    width 100%
    min-width 1180px
    background-color $bgTabCont
    overflow hidden
    position absolute
    left 0
    right 0
    top 0
    bottom 0
    margin 0 auto
  .conentCwrap
    overflow-x hidden
    overflow-y auto
    box-sizing border-box
    height 100%
    width 100%
    position relative
  .conentCwrap::-webkit-scrollbar-track-piece
    background-color rgba(0, 0, 0, 0)
    border-left 1px solid rgba(0, 0, 0, 0)
  .conentCwrap::-webkit-scrollbar
    width 8px
    height 18px
    -webkit-border-radius 8px
    -moz-border-radius 8px
    border-radius 8px
  .conentCwrap::-webkit-scrollbar-thumb
    background-color rgba(0, 0, 0, 0.2)
    background-clip padding-box
    -webkit-border-radius 8px
    -moz-border-radius 8px
    border-radius 8px
    min-height 12px
  .conentCwrap::-webkit-scrollbar-thumb:hover
    background-color rgba(0, 0, 0, 0.4)
    -webkit-border-radius 8px
    -moz-border-radius 8px
    border-radius 8px
  .conentBox
    min-width 1000px
</style>
